<div>
  <app-dia-search
    (searchTextChanged)="onSearchTextEntered($event)"
  ></app-dia-search>
</div>

<div>
  <ng-container
    *ngFor="
      let course of courses
        | filter : searchText : 'name'
        | sort : ['creationDate', 'desc']
    "
  >
    <app-dia-course
      [course]="course"
      (edit)="editCourse($event)"
      (delete)="deleteCourse($event)"
    ></app-dia-course>
  </ng-container>

  <!--Информация, что отсутствует БС-->

  <div
    *ngIf="!(courses | filter : searchText : 'name').length"
    class="surface-300 text-gray-100 p-3 pl-8 pr-8 justify-content-start align-items-center flex-wrap"
  >
    <div class="surface-card p-4 shadow-2 border-round">
      <div
        class="flex-1 flex align-items-center justify-content-center font-bold text-gray-900 m-2 px-2 py-3 border-round text-3xl font-medium text-900 mb-3"
      >
        Нет данных
      </div>
    </div>
  </div>

  <!-- Кнопка Загрузить еще-->
  <div
    *ngIf="courses.length"
    class="flex-1 flex align-items-center justify-content-center font-bold text-gray-900 py-3 surface-300"
  >
    <button type="button" pButton (click)="loadMore()">Загрузить еще</button>
  </div>
</div>
